<template>
  <div class="countdown-wrapper end-wrapper">
    <div class="left">
      <img src="@/assets/image/pic.png" alt="">
    </div>
    <div class="right">
      <p class="title font-family">Amateras Presales is Over</p>
      <p class="tip font-family">Please Wait the Official Version！</p>
      <div class="end-person">
        <img src="../../assets/image/person-mobile.png" alt=""/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/variable.scss';
.countdown-wrapper{
  width: 100%;
  min-height: calc(100vh - 190px);
  background: url('../../assets/image/taiyang.png') center top  no-repeat, url("../../assets/image/beijing.png") left top repeat-x;
  background-size: 1920px 410px;
  display: flex;
  padding-top: 60px;
  box-sizing: border-box;
  padding-left: 200px;
  .left{
    width: 511px;
    height: 720px;
    position: relative;
    overflow: hidden;
    img{
      position: absolute;
      left: -24px;
      top: 74px;
      z-index: 999;
    }
  }
  .right{
    width: 544px;
    .title{
      margin-top: 302px;
      font-size: 48px;
      line-height: 54px;
      color: $global-primary;
      font-weight: 900;
    }
    .tip{
      font-size: 24px;
      font-weight: 900px;
      margin-top: 30px;
    }
  }
}
.end-person{
  display: none;
}
</style>
